<include file="Common:header"/>
<include file="Common:left"/>
<div id="my-main" class="floatleft">
    <div class="user_enjoy">
        <div class="info_title clearfix">
            <h2 class="setting_tilte floatleft">我的设置</h2>
        </div>
        <ul class="status_tab">
            <li><a href="__URL__/index">详细资料</a></li>
            <li><a href="__URL__/passwd">修改密码</a></li>
            <li class="act"><a href="__URL__/photo">更换头像</a></li>
        </ul>
        <!-- 更换头像 -->
        <div class="new_img_wrap">
            <div class="bdsc" id="upload_button">本地上传</div>
            <div class="gs">支持JPG、PNG、GIF 最大2M</div>
            <div class="new_img clearfix"><img id="photo" src="__PUBLIC__/Uploads/photo/default_300.png"/></div>
        </div>
        <div class="current_img">
            <div class="tx">您上传的头像会生成两种尺寸 请注意小尺寸中的头像是否清晰</div>
            <div class="bimg">
                <div id="preview"><img src="{$user_logo_add|str_replace='64','160',###|default='default_160.png'}"/>
                </div>
            </div>
            <div class="bimg-tx">大尺寸头像，160x160像素</div>
            <div class="simg">
                <div id="preview_s"><img src="{$user_logo_add|str_replace='160','64',###|default='default_64.png'}"/>
                </div>
            </div>
            <div class="simg-tx">小尺寸头像64x64像素(自动生成)</div>
            <input type="hidden" id="x1" name="x1" value=""/>
            <input type="hidden" id="y1" name="y1" value=""/>
            <input type="hidden" id="x2" name="x2" value=""/>
            <input type="hidden" id="y2" name="y2" value=""/>
            <input type="hidden" id="w" name="w" value=""/>
            <input type="hidden" id="h" name="h" value=""/>
            <input type="hidden" id="source_photo" name="source_photo" value=""/>

            <div class="editBtn sc"><a class="w60r" href="javascript:void(0);" onclick="uploadClip();">上&nbsp;传</a>
            </div>
            <div id="notice" class="red" style="margin-top:-20px"></div>
        </div>
    </div>
</div>
</div>
<link href="__PUBLIC__/Css/imgareaselect/imgareaselect-default.css" rel="stylesheet" type="text/css"/>
<load href="__PUBLIC__/Js/ajaxupload.js"/>
<load href="__PUBLIC__/Js/jquery.imgareaselect.js"/>
<script type="text/javascript">
    //头像截图预览
    function preview(img, selection) {
        if (!selection.width || !selection.height) return;
        var img_width = img.width;
        var img_height = img.height;
        //大尺寸预览
        var scaleX_B = 160 / selection.width;
        var scaleY_B = 160 / selection.height;
        $('#preview img').css({
            width: Math.round(scaleX_B * img_width),
            height: Math.round(scaleX_B * img_height),
            marginLeft: -Math.round(scaleX_B * selection.x1),
            marginTop: -Math.round(scaleY_B * selection.y1)
        });
        //小尺寸预览
        var scaleX_S = 64 / selection.width;
        var scaleY_S = 64 / selection.height;
        $('#preview_s img').css({
            width: Math.round(scaleX_S * img_width),
            height: Math.round(scaleX_S * img_height),
            marginLeft: -Math.round(scaleX_S * selection.x1),
            marginTop: -Math.round(scaleY_S * selection.y1)
        });
        $('#x1').val(selection.x1);
        $('#y1').val(selection.y1);
        $('#x2').val(selection.x2);
        $('#y2').val(selection.y2);
        $('#w').val(selection.width);
        $('#h').val(selection.height);
    }

    $(document).ready(function () {
        var button = $('#upload_button'), interval;
        var fileType = "pic", fileNum = "one";
        new AjaxUpload(button, {
            action: _URL_ + "/uploadPic",
            name: 'userfile',
            onSubmit: function (file, ext) {
                if (fileType == "pic") {
                    if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)) {
                        this.setData({
                            'info': '文件类型为图片'
                        });
                    } else {
                        button.text('非图片类型文件，重新上传');
                        return false;
                    }
                }
                button.text('文件上传中');

                if (fileNum == 'one')
                    this.disable();
                interval = window.setInterval(function () {
                    var text = button.text();
                    if (text.length < 14) {
                        button.text(text + '.');
                    } else {
                        button.text('文件上传中');
                    }
                }, 200);
            },
            onComplete: function (file, response) {
                button.text('本地上传');
                window.clearInterval(interval);
                this.enable();
                $('#notice').html('');
                //上传完成显示截图功能
                $('#photo').attr('src', _PUBLIC_ + "/Uploads/photo/" + response);
                $('#source_photo').val(response);
                $('#preview img').attr('src', _PUBLIC_ + "/Uploads/photo/" + response);
                $('#preview_s img').attr('src', _PUBLIC_ + "/Uploads/photo/" + response);
                setTimeout(function () {
                    $('#photo').imgAreaSelect({
                        x1: 0,
                        y1: 0,
                        x2: 160,
                        y2: 160,
                        minWidth: 64,
                        minHeight: 64,
                        aspectRatio: '1:1',
                        handles: true,
                        onInit: preview,
                        onSelectChange: preview,
                        persistent: true,
                        resizable: true
                    });
                }, 200);
            }
        });

    });

    //保存头像
    function uploadClip() {
        showBoxBg();//显示遮罩层
        $.ajax({
            dataType: "json",
            type: "POST",
            url: _URL_ + "/uploadClipPic",
            data: "x1=" + $('#x1').val() + "&y1=" + $('#y1').val() + '&w=' + $('#w').val() + '&h=' + $('#h').val() + '&source_photo=' + $('#source_photo').val(),
            success: function (json) {
                if (json.status == 1) {
                    closeBoxBg();//关闭遮罩层
                    $('#notice').html(json.text);
                } else {
                    $('#common-notice-text').html(json.text);
                    showBox('#common-notice');
                    jumpurlTime(_URL_ + '/photo?t=' + Math.random(), 2000);
                }
            }
        })
    }
</script>
<!-- 普通提示层 -->
<div id="common-notice" class="alert-wrap">
    <div class="alert-wrap-header"><i class="bg"></i>温馨提示&nbsp;</div>
    <div id="common-notice-text"></div>
    <a class="close-alert-wrap bg" href="javascript:void(0)" onclick="closeDialog('#common-notice')" title="关闭"></a>
</div>
<include file="Common:footer"/>
